<template>
<div class="home">
  <top></top>
  <div class="wrap clearfix">
    <div class="home_left clearfix">
      <ul class="homelist clearfix">
        <li v-for="(item,index) in homeList"
        :class="isHomeID === item.tar?'isHome':''"
        @click="listTar(item)"
        :key="index">{{item.type}}</li>
      </ul>

        <router-view></router-view>

    </div>
    <div class="home_rigth clearfix">
      <p class="home_rigth_con">个人中心</p>
      <ul class="per_ul">
        <li v-for="(item,index) in Personal" :key="index"
        :class="isPersonalID === item.id?'isPersonal':''"
        ><span @click="perTar(item)">{{item.name}}</span> </li>
      </ul>
    </div>
  </div>
</div>
</template>
<script>
import top from '@/component/top'
// import foote from '@/component/footer'
import { getPlaylistDetail } from "@/api/index";
export default {
  name: 'App',
  components: {
    top,
  },
  data () {
    return {
      isHomeID: '/home/recommend',
      isPersonalID: 0,
      homeList: [
        {
          id:0,
          type:'个人推介',
          tar: '/home/recommend'
        },
          {
          id:1,
          type:'排行榜',
          tar: '/home/rankingList'
        },  {
          id:2,
          type:'歌单',
          tar: '/home/song'
        },  {
          id:3,
          type:'歌手',
          tar: '/home/recommen'
        },  {
          id:4,
          type:'搜索',
          tar: '/home/recomme'
        },
      ],
      Personal: [
        {
          name:'个人喜欢',
          id:0
        },{
          name: '播放历史',
          id:1
        }
      ]
    }
  },
  methods: {
    addList() {
      var id=2190625773
      getPlaylistDetail(id)
      .then(resolve => {
        console.log(resolve.data)
      })
    },
    listTar(data) {
      this.isHomeID = data.tar
      this.$router.push({
        path: data.tar
      })
    }
  },
  mounted() {
    // this.addList()
    this.isHomeID =this.$route.path
    console.log( this.$route.path )
  }
}
</script>
<style scoped>
.home {
  background: #dbc4c1e0;
}
.homelist li {
  float: left;
  padding: 15px 15px 8px 15px;
  margin-right: 15px;
  cursor: pointer;
  border-bottom: 2px solid #dbc4c1e0;
  margin-bottom: 15px;
}
.isHome {
  border-bottom: 2px solid #c20c0c !important;
}
.home_left {
  padding-left: 10px;
  overflow: hidden;
  float: left;
  width: 745px;
  border: 1px solid red
}
.home_rigth {
  overflow: hidden;
  float: left;
  width: 414px;
  border: 1px solid red;
  margin-left: 40px;
  padding-top: 13px;
}
.home_rigth p {
  text-align: center;
  margin-bottom: 15px;
}
.per_ul li {
  margin-left: 20px;
  font-size: 14px;
  color: #333333;
}
.per_ul li span {
  cursor: pointer;

}
</style>
